<template>
  <el-dialog
      title="欢迎登陆"
      :visible.sync="dialogVisible"
      width="30%">
    <!--      登陆输入框-->
    <span class="mobile-number-box">
          <el-input v-model="mobileNumber" class="mobile-number" placeholder="请输入您的手机号"></el-input>
    </span>
    <span>
        <el-input v-model="password" class="password" placeholder="请输入您的密码"></el-input>
    </span>
    <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible=false">还不想登陆</el-button>
          <el-button type="primary" @click="beginLogin">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {getQuit, loginPh, refreshLoginStatus} from "@/network/login";
import {setCookie} from "@/until/cookie";
import {getUserDetails} from "@/network/getuserinfo";

export default {
  name: "LoginBox",
  data() {
    return {
      dialogVisible: false,//控制登陆款是否弹出
      mobileNumber: '15755967688',//双向绑定用户输入的电话号码
      password: '200223252@lml',//双向绑定用户输入的密码
      whetherLogin: false,//用户登陆否？
    }
  },
  created() {
    this.bus.$on('userWantLogin', this.showDialog)//接收用户点击登陆按钮发出想要登陆的事件，方法使登陆框显示
  },
  methods: {
    showDialog() {//展示登陆框
      this.dialogVisible = true
    },
    async beginLogin() {//点击登陆按钮，进行登陆验证
      await getQuit()//如果用户有登陆，使其退出
      // console.log(this.$md5(this.password))
      const {data: res} = await loginPh(this.mobileNumber, this.$md5(this.password))//发起请求，验证手机号和密码是否正确/**/
      // console.log(res)
      if (res.code !== 200) {//进行验证反馈，告诉用户密码是否正确，登陆是否遇到了不可控因素
        return this.$message.error('您的密码错误哦！再仔细想想！')
      } else {
        this.$message.success('密码正确！正在为您全力登陆中！')
        this.$store.state.carousel.userId = res.account.id//将用户id保存到vuex中
        setCookie(res.cookie)//保存cookie
        await refreshLoginStatus()//正确，刷新用户的登陆状态
        const {data: details} = await getUserDetails(this.$store.state.carousel.userId)//获取用户详情数据
        this.$store.state.carousel.userDetails = details//将用户详情数据保存到vuex中
        this.whetherLogin = true//用户登陆状态修改为真
        this.bus.$emit('haveLogin', this.whetherLogin)//发出用户登陆完成的事件
        this.dialogVisible = false//登陆完成，关闭登陆框
      }
    },
  }
}
</script>

<style scoped lang="less">

/deep/ .el-dialog__header {
  text-align: center;
}

/deep/ .el-dialog__title {
  color: #ffffff;
}

/deep/ .el-dialog__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  height: 200px;
}

/deep/ .mobile-number {
  width: 310px;
}

/deep/ .password {
  width: 310px;
}

/deep/ .el-input__inner {
  background-color: rgba(0, 0, 0, 0.3);
  color: #ffffff;
}

/deep/ .el-dialog {
  min-width: 357px;
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.5);
}

/deep/ .dialog-footer {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

/deep/ .el-button--primary {
  color: #AEAEAE;
}

/deep/ .el-button {
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid #B2281E;
  border-radius: 20px;
  transition: all .2s linear;
  &:hover {
    transform: translateY(-2px);
    box-shadow: 5px 5px 20px #B2281E;
    color: #B2281E;
  }
}
</style>
